$('body').css({
    perspective: '1750px',
    'perspective-origin': 'center center'
}).mousemove(function (e) {
    $(this).css({
        'perspective-origin': `${e.pageX * 0.5}px ${e.pageY * 0.8}px`
    })
})
.on('touchmove',function(e){
    const x = e.originalEvent.targetTouches[0].pageX; 
    const y = e.originalEvent.targetTouches[0].pageY;
    $(this).css({
        'perspective-origin': `${x* 0.5}px ${y * 0.8}px`
    })
})
$("#container").css({
    transform: `translate3d(-50%,-60%,0) rotate3d(1,0,0,0deg)`,
    transition:'transform 2s linear',
    zoom: '0.1'
})
.autoRotateX(0.1,'translate3d(-50%,-70%,0)'); //自动旋转

//create3DBox(长，宽，高，数量，物体样式，物体每个面的样式)
const pathStyle = $.setAllChildStyle({
    backgroundImage: 'url(/model/image/path.PNG)',
    border: 'none'
});
//创建道路
$('.path-1')
    .css({
        transform: 'rotatex(90deg)'
    })
    .create3DBox(600, 500, 3000, 1, {}, pathStyle)
$('.path-2')
    .css({
        transform: 'rotatex(90deg) rotate(90deg) translate3d(1200px,-2300px,500px)'
    })
    .create3DBox(600, 500, 4000, 1, {}, pathStyle)
$('.path-3')
    .css({
        transform: 'rotatex(90deg) translate3d(4600px,0px,1000px)'
    })
    .create3DBox(600, 500, 3000, 1, {}, pathStyle)
$('.path-4')
    .css({
        transform: 'rotatex(90deg) rotate(90deg) translate3d(-1200px,-2300px,1500px)'
    })
    .create3DBox(600, 500, 4000, 1, {}, pathStyle)

//创建岩石
const stoneStyle = $.setAllChildStyle({
    backgroundImage: 'url(/model/image/stone.PNG)',
    border: 'none'
});
$('.path-5')
    .css({
        transform: 'translate3d(1200px,-2300px,0px)'
    })
    .create3DBox(600, 600, 4000, 1, {}, stoneStyle)

$('.path-6')
    .css({
        transform: 'translate3d(3400px,-2300px,0px)'
    })
    .create3DBox(600, 600, 4000, 1, {}, stoneStyle)

$('.path-7')
    .css({
        transform: 'rotatez(90deg) rotate(0deg) translate3d(-2000px,-2300px,0px)'
    })
    .create3DBox(600, 600, 1600, 1, {}, stoneStyle)

$('.path-8')
    .css({
        transform: 'rotatez(90deg) rotate(0deg) translate3d(-5000px,-2300px,0px)'
    })
    .create3DBox(600, 600, 1600, 1, {}, stoneStyle)

//创建火
const fireStyle = $.setAllChildStyle({
    backgroundImage: 'url(/model/image/fire.PNG)',
    border: 'none'
});
$('.fire-1')
    .css({
        transform: 'translate3d(2281px,-4447px,0px)'
    })
    .create3DBox(600, 600, 600, 1, {}, fireStyle)
    .autoRotateX(0.1,'translate3d(2281px,-4447px,0px)',true); //自动旋转


// 创建一个模特
$('.createModel').click(function(){
    const mode = $(this).data('id');
    $('.container-map').createModel({
        headUrl: '/model/image/face.PNG',
        color: mode == 'normal'?`rgb(72,53,19)` : $.getRandomColor(),
        z: -5650
    },mode == 'random')
    let wait = 3;
    $('.createModel_' + mode).prop('disabled',true).html(`请稍等 ${wait--}s `)
    const timer = setInterval(function(){
        $('.createModel_' + mode).html(`请稍等 ${wait}s `)
        if(wait == 0){
            const bottonContent = mode == 'normal' ? `创建一个普通像素人` : `创建一个特殊像素人`;
            $('.createModel_' + mode).prop('disabled',false).html(bottonContent);
            clearInterval(timer);
        }
        else{
            wait--;
        }
    },1000)
})

